<template>
  <text
    class="iconfont"
    :class="clazz"
    :style="style"
  ></text>
</template>

<script>
  export default {
    name: 'WeIcon',
    props: {
      // 图标class
      type: {
        required: true
      },
      // 大小，取值big(大号), middle(中号), mini(小号)
      size: {
        default: 'default'
      },
      // 主题，取值black黑色，white白色，grey灰色
      theme: {
        default: 'black'
      },
      // 加粗
      bold: {
        default: false
      },
      // 向上偏移
      top: {
        default: 0
      },
      // 向左偏移
      left: {
        default: 0
      },
      // 左间距
      gapLeft: {
        default: 0
      },
      // 右间距
      gapRight: {
        default: 0
      }
    },
    computed: {
      clazz() {
        return `${this.type} icon-size__${this.size} icon-theme__${this.theme}${this.bold ? ' icon-weight__bold' : ''}`
      },
      style() {
        return `top: ${this.top}; left: ${this.left}; margin-left: ${this.gapLeft}; margin-right: ${this.gapRight}`
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../style/variables";

  .iconfont {
    display: inline;
    color: $font-color;
    position: relative;
    // 默认大小
    &.icon-size__default {
      font-size: $font-size !important;
    }

    // 大号
    &.icon-size__big {
      font-size: $font-size-big !important;
    }

    // 中号
    &.icon-size__middle {
      font-size: $font-size-middle !important;
    }

    // 小号
    &.icon-size__mini {
      font-size: $font-size-mini !important;
    }

    // 黑色主题
    &.icon-theme__black {
      color: #333;
    }

    // 白色主题
    &.icon-theme__white {
      color: #fff;
    }

    // 灰色主题
    &.icon-theme__grey {
      color: #999;
    }

    // 加粗
    &.icon-weight__bold {
      font-weight: bold;
    }
  }
</style>
